/*
= IMPORTING STUFF AND SETTING DEFAULT STYLES
-------------------------------------------------------------------------------------- */
@import url("reset.css");

/*
= FONT EMBEDING
-------------------------------------------------------------------------------------- */
@font-face {
    font-family: 'ITCAvantGardePro-Bold';
    src: 
        url('../fonts/ITCAvantGardePro-Bold.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
    font: 12px Arial, Helvetica, sans-serif;
    color: #333333;
}

#TB_secondLine {
    font: 10px Arial, Helvetica, sans-serif;
    color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    background-color:#000;
    filter:alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
    height:100%;
    width:100%;
}

* html #TB_overlay { /* ie6 hack */
    position: absolute;
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
    position: fixed;
    background: #ffffff;
    z-index: 102;
    color:#000000;
    display:none;
    border: 4px solid #525252;
    text-align:left;
    top:50%;
    left:50%;
}

* html #TB_window { /* ie6 hack */
    position: absolute;
    margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
    display:block;
    margin: 15px 0 0 15px;
}

#TB_caption{
    height:25px;
    padding:7px 30px 10px 25px;
    float:left;
    font-weight: bold
}

#TB_closeWindow{
    height:25px;
    padding:11px 25px 10px 0;
    float:right;
}

#TB_closeAjaxWindow{
    padding:7px 10px 5px 0;
    margin-bottom:1px;
    text-align:right;
    float:right;
}

#TB_ajaxWindowTitle{
    float:left;
    padding:7px 0 5px 10px;
    margin-bottom:1px;
}

#TB_title{
    background-color:#e8e8e8;
    height:27px;
}

#TB_ajaxContent{
    clear:both;
    padding:2px 15px 15px 15px;
    overflow:auto;
    text-align:left;
    line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
    padding:15px;
}

#TB_ajaxContent p{
    padding:5px 0px 5px 0px;
}

#TB_load{
    position: fixed;
    display:none;
    height:13px;
    width:208px;
    z-index:103;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
    position: absolute;
    margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
    z-index:99;
    position:fixed;
    top: 0;
    left: 0;
    background-color:#fff;
    border:none;
    filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    height:100%;
    width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
    position: absolute;
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
    clear:both;
    border:none;
    margin-bottom:-1px;
    margin-top:1px;
    _margin-bottom:1px;
}


/*
= COMMON 
-------------------------------------------------------------------------------------- */
h1, h2, h3{

    font-weight: bold;
    text-shadow: 2px 2px 1px #FFFFFF;
}
h1{
    font-size: 24px;
    line-height: 35px;
    padding-top: 23px; 
    font-family: 'ITCAvantGardePro-Bold';
    font-weight: normal;
}
h2{
    font-size: 19px;
    line-height: 29px;
}
h3{
    font-size: 17px;
    line-height: 23px;
}
ul, ol {
    margin: 0;
    padding: 0;
}
ul li{
    list-style-type: none;

}
a {
    color: #000;
    outline: medium none;
    text-decoration: none;
    font-size: 13px;
}
a:hover {
/*    color: #FFF*/
}
a.active {
    color: #417BB4 !important;
}
span.small{
    font-size: 10px;
    text-transform: uppercase;
    margin-right: 3px;
    text-shadow: 1px 1px 0 #FFFFFF
}

/*
= DO PAGE 
-------------------------------------------------------------------------------------- */
body{
        background: url(../img/bgr/site-bg.png) no-repeat top center;
/*    background: url(../img/pageBg.gif) repeat-x top center;*/
    font-family: Arial,Helvetica,sans-serif;
    color: #333333;
    font-size: 13px;
}
.wrapp{
    margin: 0 auto;
    width: 782px;
    min-height: 782px;
}
#header{
    padding-top: 23px;
}
#header #logo,
#header .head-contact,
#header #social_links{
    float: left;
}
#header #logo{
    background: url(../img/logo.png) no-repeat;
    width: 166px;
    height: 42px;
}
#header .head-contact{
    color: #999999;
    text-align: right;
    margin: 5px 0 0 111px;
}
#header .head-contact strong{
    font-weight: normal;
    color: #417BB4;
}
#header .head-contact a{
    color: #999;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-decoration: underline;
}
#header .admin_preview{
    float: right;
    margin-top: 5px
}
#header #social_links {
    margin-left: 21px;
    margin-top: 5px
}
#header #social_links li a{
    display: block;
    height: 28px;
    margin-bottom: -7px;
    overflow: hidden;
    text-indent: -999px;
    width: 28px;
}
#header #social_links li.facebook a{
    background: url("../img/social/fb.png") no-repeat 0 0 transparent;
}
#social_links li.gplus a{
    background: url("../img/flippa_social/google-plus.png") no-repeat 0 0 transparent;
}
#header #social_links li.linkedin a{
    background: url("../img/flippa_social/linkedin.png") no-repeat 0 0 transparent;
}
#menu{
    margin: 13px 0 13px 10px
}
#menu ul li{
    float: left;
    background: url(../img/bgr/spacer.png) no-repeat 0 4px;
    padding: 0 10px
}
#menu ul li:first-child{
    background: none;
    padding-left: 0
}
#menu ul li a{
    color: #000;
    display: block;
    font-family: 'ITCAvantGardePro-Bold';
    font-size: 13px;
    font-weight: normal;
    line-height: 13px;
    margin-top: 3px;
    text-shadow: 1px 1px 0 #FFFFFF;
}
#menu ul li a:hover, .all-news a:hover{
    color: #417BB4;
    transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s; /* Firefox 4 */
    -webkit-transition:all 0.2s linear 0s; /* Safari and Chrome */
    -o-transition: all 0.2s linear 0s; /* Opera */
}
#body{
    width: 781px;
    min-height: 512px;
    border: 1px solid #dfdfdf;
    border-radius: 10px;
    background: #FFF;
    position: relative;
    box-shadow: 0 0 20px #999999
}
.pad10{padding: 10px}
#banner-01{
    background: url(../img/naslovna/banner-01.jpg) no-repeat;
    width: 460px;
    height: 414px;
    margin-bottom: 10px;
    text-align: center;
    border-top-left-radius: 8px
}
#banner-01 .title{
    text-transform: uppercase;
    font-family: 'ITCAvantGardePro-Bold';
    font-weight: normal
}
#banner-01 p{
    padding: 21px 0 0 0
}
#intro{
    background: #e6edf6;
    width: 460px;
    height: 68px;
}
#intro p{
    padding: 10px 7px 10px 10px;
    line-height: 16px;
}
.radius{
    border-radius: 6px
}
.ml10{
    margin-left: 10px
}
#banner-02{
    background: url(../img/naslovna/banner-02.jpg) no-repeat;
    width: 291px;
    height: 190px;
    margin-bottom: 10px;
    border-top-right-radius: 8px
}
#newsletter{
    width: 160px;
    height: 138px;
    background: #E6EDF6;
}
#newsletter .inner, #banner-03 .inner{
    padding: 11px 0 11px 9px
}
#newsletter .title, #banner-03 .title{
    text-transform: uppercase;
    font-size: 11px;
    text-shadow: 1px 1px 0 #FFFFFF;
    font-weight: normal;
    font-family: 'ITCAvantGardePro-Bold';
}
#newsletter p{
    font-size: 10px;
    padding:8px 0 11px;
}
#newsletter input[type=text]{
    font-size: 11px;
    border: 0;
    padding: 2px 5px;
    width: 133px;
    border-radius: 3px;
    border:1px solid #FFF;
}
#newsletter input[type=submit]{
    float: right;
    margin-top: 9px;
    margin-right: 7px;
    border:0;
    cursor: pointer;
    font-family: arial;
}
#banner-03{
    background: url(../img/naslovna/banner-03.jpg) no-repeat;
    width: 121px;
    height: 138px;
    margin-bottom: 10px
}

#brochure{
    background: url(../img/naslovna/banner-04.jpg) no-repeat;
    width: 291px;
    height: 144px;
}
#brochure .title{
    font-size: 11px;
    text-shadow: 1px 1px 0px #FFFFFF;
    text-transform: uppercase;
    font-weight: normal;
    font-family: 'ITCAvantGardePro-Bold';
}
#brochure .inner{
    text-align: right;
    padding: 11px 6px 0px 10px
}
#brochure a{
    margin-top: 79px
}
#footer{
    text-align: right;
    margin-bottom: 43px
}
#footer p{
    padding:7px 7px 0 0;
    font-size: 11px;
    color: #666666;
}
.mt10{margin-top: 10px;}
.mt6{margin-top: 6px;}
.btn{
    background: url("../img/bgr/btn-sm.png") repeat-x;
    border-radius: 2px;
    color: #FFFFFF;
    display: inline-block;
    height: 18px;
    line-height: 17px;
    padding: 0 17px;
    font-size: 10px;
    text-shadow: 1px 1px 0 #2F2F2F;
    font-weight: normal;
}
.btn-primary{
    background: url("../img/bgr/btn-bg.png") repeat-x;
    padding: 0 20px;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 12px;
}
.btn:hover{
    color: #FFFFFF;
    text-decoration: none;
}

.bbox{
    position: relative
}
.bbox a.btn{
    position: absolute;
    bottom: 8px;
    right: 6px;
}

.description{
    width:460px
}
.description h1, .description h2, .description h3{
    padding: 0 7px 0 10px
}
.description p {
    line-height: 17px;
    padding: 10px 7px 10px 10px;
    font-size: 14px
}
.description ul{
    padding:10px 7px 10px 10px
}
.description ul li{
    list-style-type: disc;
    margin-left: 23px;
    font-size: 14px;
    line-height: 17px;
}

/*BANNERS*/

.banner{
    width: 288px;
    height: 189px;
    margin-bottom: 10px;
    border: 1px solid #DFDFDF;
}
.osistemu1{
    background: url(../img/osistemu/banner-01.jpg) no-repeat;
    border-top-right-radius: 8px
}
.osistemu2{
    background: url(../img/osistemu/banner-02.jpg) no-repeat;
}
.osistemu3{
    background: url(../img/osistemu/banner-03.jpg) no-repeat;
}
.osistemu4{
    background: url(../img/osistemu/banner-04.jpg) no-repeat;
}
.osistemu5{
    background: url(../img/osistemu/banner-05.jpg) no-repeat;
    margin-bottom: 0;
    border-bottom-right-radius: 8px
}
.top5{
    padding-top: 5px !important
}
.karakteristike1{
    background: url(../img/karakteristike/banner-01.jpg) no-repeat;
    border-top-right-radius: 8px
}
.karakteristike2{
    background: url(../img/karakteristike/banner-02.jpg) no-repeat;
}
.karakteristike3{
    background: url(../img/karakteristike/banner-03.jpg) no-repeat;
}
.karakteristike4{
    background: url(../img/karakteristike/banner-04.jpg) no-repeat;
}
.karakteristike5{
    background: url(../img/karakteristike/banner-05.jpg) no-repeat;
}
.karakteristike6{
    background: url(../img/karakteristike/banner-06.jpg) no-repeat;
}
.karakteristike7{
    background: url(../img/karakteristike/banner-07.jpg) no-repeat;
    margin-bottom: 0;
    border-bottom-right-radius: 8px
}

.seo1{
    background: url(../img/seo/banner-01.jpg) no-repeat;
    border-top-right-radius: 8px
}
.seo2{
    background: url(../img/seo/banner-02.jpg) no-repeat;
}
.seo3{
    background: url(../img/seo/banner-03.jpg) no-repeat;
    margin-bottom: 0;
    border-bottom-right-radius: 8px
}

.error{
    border:1px solid red !important;
}

.all-news{
    padding: 10px 7px 10px 10px
}

.onenews{
    border-bottom: 1px solid #EBEBEB;
    padding: 10px 0
}
.onenews:last-child{
    border-bottom: none;
}
.onenews h2 a{
    font-size: 17px
}
.onenews h2, .onenews p, .onenews .pic{
    float: left
}
.onenews h2, .onenews p{
    margin-left: 5px;
    width: 500px;
}
.onenews .pic{
    width: 113px
}
.onenews .pic a img{
    display: block
}

.onenews h2{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: -3px;
    line-height: 28px
}
.onenews p{
    padding: 8px 7px 0 10px;
    line-height: 17px
}

.onenews .whole-news,
.description .buttons-cart{
    font-family: 'ITCAvantGardePro-Bold';
    text-shadow: 1px 1px 0 #FFFFFF;
}
.onenews .whole-news:hover,
.description .buttons-cart:hover{
    text-decoration: underline
}

.description .buttons-cart{
    padding: 10px 7px 10px 10px;
    float: right;
    width: 50px
}
.fb-like{
    margin-top: 5px;
    margin-left: 10px;
    float: left;
    width: 280px
}

.features{
    background-repeat: no-repeat;
    float: left;
    padding: 20px 0 34px 17px;
    width: 535px;
}
.features h1,
.references h1{
    padding: 0;
    font-family: 'ITCAvantGardePro-Bold';
    font-weight: normal;
    font-size: 23px
}
.features ul {
    border-right: 1px solid #EEEEEE;
    color: #7A7A7A;
    float: left;
    font: 11px Arial,Helvetica,sans-serif;
    list-style: none outside none;
    margin: 20px 0 0;
    padding: 0;
}
.features li {
    background: url("/images/navig/shared2/ikone_naslovna.gif") no-repeat scroll 0 0 transparent;
    float: left;
    margin-right: 10px;
    width: 248px;
}
.features .icon_ft {
    float: left;
    margin-bottom: 20px;
    margin-right: 9px;
}
.features li a {
    padding-bottom: 5px;
    text-decoration: none;
}
.features li a img{ display: block}
.features .text_ft a {
    font-size: 13px;
    font-weight: bold;
    padding-bottom: 2px;
    text-decoration: none;
    font-family: 'ITCAvantGardePro-Bold';
    font-weight: normal;
}
.features li a:hover{
    color: #417BB4;
}
.references{
    float: left;
    padding: 20px 0 34px 12px;
    width: 196px;
}
.references h1 {
    margin: 0;
    padding: 0 0 15px;
}